// App.js
import React, { useState } from 'react';
import { Layout, Menu, Button, theme } from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';
import SearchButton from './SearchButton';  // 搜索按钮组件
import DataTable from './DataTable';        // 数据表格组件
import CustomDivider from './Divider';      // 分割线组件
import BasicInput from './BasicInput';      // 输入框组件

const { Header, Sider, Content } = Layout;

const App1 = () => {
  // 状态管理
  const [collapsed, setCollapsed] = useState(false);      // 侧边栏折叠状态
  const [selectedMenu, setSelectedMenu] = useState('1');  // 当前选中菜单项

  // 获取主题样式
  const { token: { colorBgContainer, borderRadiusLG } } = theme.useToken();

  // 根据菜单选择渲染对应内容
  const renderContent = () => {
    switch(selectedMenu) {
      case '1':
        return <><BasicInput /><CustomDivider /></>;
      case '2':
        return <DataTable />;
      case '3':
        return <SearchButton />;
      default:
        return <div>请选择菜单</div>;
    }
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 左侧边栏 */}
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        width={200}
        style={{ background: colorBgContainer }}
      >
        <div style={{ height: 64, background: '#001529' }} /> {/* 顶部logo占位 */}
        <Menu
          mode="inline"
          selectedKeys={[selectedMenu]}
          items={[
            {
              key: '1',
              icon: <UserOutlined />,
              label: '表单输入',
            },
            {
              key: '2',
              icon: <VideoCameraOutlined />,
              label: '数据表格',
            },
            {
              key: '3',
              icon: <UploadOutlined />,
              label: '搜索功能',
            },
          ]}
          onSelect={({ key }) => setSelectedMenu(key)} // 菜单选择事件
        />
      </Sider>

      {/* 右侧内容区 */}
      <Layout>
        {/* 顶部Header */}
        <Header style={{ 
          padding: 0, 
          background: colorBgContainer,
          display: 'flex',
          alignItems: 'center'
        }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{ 
              fontSize: 20,
              width: 64,
              height: 64 
            }}
          />
          <h2 style={{ margin: 0 }}>简易导航网站</h2>
        </Header>

        {/* 主内容区域 */}
        <Content style={{ 
          margin: 24,
          padding: 24,
          background: colorBgContainer,
          borderRadius: borderRadiusLG 
        }}>
          {renderContent()}
        </Content>
      </Layout>
    </Layout>
  );
};

export default App1;